<!-- 裸钻页面 -->
<template>
	<view>
		<!-- <view class="page-width">
			<app-search-for :value="value" :mall_id="mall_id" @tosearch="tosearch"></app-search-for>
		</view>
		<view class="gold-video" v-if="live_src!=''" @click="jump(live_url)">
			<image class="image" :src="live_src" mode="widthFix"></image>
		</view> -->
		<!-- 钻石查询 -->
		<view class="beseparate" v-if="twoquery">
			<app-jump-button class="besebutton" v-for="(item,index) in twoquery" :key="index" form :url="item.url">
				<view class="besepone">
					<image :lazy-load="true" class="image" :src="item.icon_url" mode=""></image>
				</view>
			</app-jump-button>
		</view>
		<!-- 分类 3*2 -->
		<!-- <view class="cate-style cross-center dir-left-wrap">
			<view class="cate-style-item" v-for="(item,index) in cat_list" :key="index"
				@click="morelist(item.id,item.name,index)">
				<image class="cate-image" :src="item.pic_url" mode=""></image>
				<view class="cate-name">
					{{item.name}}
				</view>
			</view>
		</view> -->
		<view class="list-two">
			<view class="list-two-item" v-for="(item,index) in list" :key="index" @click="todetail(item.tid)">
				<image class="image"
					:src="imgprefix + '/web/uploads/diamonds/' + item.shapeId + '.png?timeout='+timeout" mode="">
				</image>
				<view class="bridetail">
					<view class="list-two-title u-line-5">编码：{{item.barCode}}</view>
					<view class="dir-left-wrap main-between">
						<text>颜色：{{item.colorName}}</text>
						<text>重量：{{item.priStoneWeight}}ct</text>
						<text>形状：{{item.shapeName}}</text>
						<text>净度：{{item.clearityName}}</text>
						<text>切工：{{item.cutName}}</text>
						<text>抛光：{{item.polishName}}</text>
						<text>对称：{{item.symmetryName}}</text>
					</view>
					<view class="dir-left-wrap main-between">
						<view class="">
							价格：￥{{item.salePrice}}
						</view>
						<view class="">
							市场价：￥{{item.marketPrice}}
						</view>
					</view>
				</view>
			</view>
			<view class="nopt" v-if="list.length == 0">
				暂无内容
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	let isSearch = false
	let barcode1, clearityid1, fistname1, secdname1 = ''
	let shapejid1,
		colorid1,
		cutid1,
		polishid1 = -1
	let shapeid1 = '003'
	export default {
		data() {
			return {
				twoquery: [],
				list: [],
				page: 1,
				page_count: 1,
				imgprefix: this.$siteInfo.imgroot,
				timeout: new Date().getTime(),
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
		},
		mounted() {

		},
		onLoad() {
			this.allReq(65)
			this.loadlist()
		},
		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++
				this.loadlist()
			}
		},
		methods: {
			allReq(pid) {
				let pdata = {
					pid: pid,
					status: 1,
					limit: 2
				}
				this.$request({
					url: this.$api.navs.list,
					data: pdata
				}).then((res) => {
					if (res.code == 0) {
						this.twoquery = res.data.list
					}
				}).catch(() => {

				})
			},
			todetail(id) {
				uni.navigateTo({
					url: '/plugins/diamonds/baredritail?id=' + id
				})
			},
			loadlist() {
				let params = {
					page: this.page,
					limit: 10,
					params: {
						orderby: {}
					}
				}
				if (this.sort == 1) {
					params.params.orderby.priStoneWeight = this.sort_type_z
				} else if (this.sort == 2) {
					params.params.orderby.discountPrice = this.sort_type_g
				}
				this.$request({
					url: this.$api.goods.zslist,
					data: params
				}).then(res => {
					this.page_count = res.data.pagination.page_count
					this.list = this.list.concat(res.data.list)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gold-video {
		width: 100%;
		// height: 450rpx;

		.image {
			width: 100%;
			// height: 586rpx;
			// height: 450rpx;
		}

		.video {
			width: 100%;
			height: 450rpx;
		}
	}

	/* 查询 */
	.beseparate {
		width: 720rpx;
		margin: 24rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.besepone {
		position: relative;
		// padding: 24rpx 24rpx 32rpx 36rpx;
		width: 350rpx;
		height: 490rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.image {
			width: 350rpx;
			height: 490rpx;
		}
	}

	.cate-style {
		margin: 36rpx auto;

		.cate-style-item {
			width: 250rpx;
			text-align: center;

			.cate-image {
				width: 180rpx;
				height: 180rpx;
			}

			.cate-name {
				font-size: 28rpx;
				font-weight: 700;
				text-align: center;
			}
		}
	}

	.cate-title {
		// text-align: center;
		font-size: 32rpx;
		// margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
		font-weight: 600;
	}

	.cate-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: #f4f4f4;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.cate-title text {
		padding: 0 10px;
		position: relative;
	}

	.list-one {
		width: 720rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		// display: inline-flex;
		// width: 375rpx;
		// flex-direction: row-reverse;

		.list-one-item {
			width: 350rpx;
			height: 460rpx;
			font-size: 28rpx;
			margin: 0 auto;

			.image {
				width: 350rpx;
				height: 350rpx;
			}
		}
	}

	.list-two {
		margin: 20rpx 0;
		width: 100%;

		.list-two-item {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 auto;
			width: 720rpx;
			// height: 240rpx;
			font-size: 28rpx;
			background-color: #FFFFFF;

			.bridetail {
				color: #8b542f;
				padding: 24rpx 32rpx;
				background: #FFF;
				font-size: 26rpx;
				width: 460rpx;
			}

			&+.list-two-item {
				margin-top: 24rpx;
			}

			.image {
				width: 240rpx;
				height: 240rpx;
			}

			.list-two-title {
				// flex: 1;
				// margin-left: 36rpx;
				text-align: justify;
			}
		}
	}

	.nopt {
		text-align: center;
		line-height: 234rpx;
		font-size: 30rpx;
	}
</style>
